<template>
	<view class="local-guide-page">
		<!-- 头部背景、标题和搜索栏 -->
		<u-sticky>
			<view class="header-section">
				<!-- <image class="header-bg" src="@/static/index/featured/bdxd_bg.png" mode="widthFix"></image> -->
				<!-- <view class="goBack" @click="goBack()">
					<u-icon name="arrow-left" size="22"></u-icon>
				</view> -->
				<view class="LocalWizardLogo">
					<image src="/static/index/local-guide/LocalWizardLogo.png" mode=""></image>
				</view>
				<view class="LocalWizardText">
					<image src="/static/index/local-guide/LocalWizardText.png" mode=""></image>
				</view>
				<view class="header-content">
					<view class="top-bar">
						<text class="page-title" @click="goBack()">
							<!-- 跟着本地人 -->
							<u-icon name="arrow-left" size="22"></u-icon>
						</text>
						<view class="how-to-link">
							<u-icon name="info-circle" color="#000" size="16"></u-icon>
							<text>如何成为本地向导?</text>
						</view>
					</view>
					<text class="page-subtitle">
						<!-- 吃喝玩乐不踩雷~ -->
					</text>
					<view class="search-bar">
						<u-icon name="search" color="#464646" size="30"></u-icon>
						<text class="search-placeholder">定制属于你的专属旅程</text>
						<view class="search-button">
							<text>去定制</text>
							<u-icon name="arrow-right" color="#fff" size="14" bold></u-icon>
						</view>
					</view>
				</view>
			</view>
		</u-sticky>


		<!-- Swiper轮播组件 -->
		<view class="swiper-container">
			<u-swiper :list="swiperList" keyName="image" height="120" :autoplay="true" circular radius="10"
				imgMode="aspectFill" indicator indicatorMode="dot" indicatorActiveColor="#FBD13E"
				indicatorInactiveColor="rgba(255, 255, 255, 0.5)"></u-swiper>
		</view>


		<!-- 筛选和Tab栏 -->

		<u-sticky offset-top="175">
			<view class="filter-bar">
				<view class="tabs">
					<view v-for="(tab, index) in tabList" :key="index" class="tab-item"
						:class="{ active: currentTab === index }" @click="handleTabChange(index)">
						{{ tab.name }}
					</view>
				</view>
				<view class="actions">
					<view class="action-item" @click="showFilterPopup = true">
						<u-icon name="/static/index/featured/icon_sx.png" color="#333" size="18"></u-icon>
						<text>筛选</text>
					</view>
					<view class="action-item" @click="navigateToCitySelect">
						<text>淮安</text>
						<u-icon name="/static/index/featured/icon_down.png" color="#2D2E29" size="12" bold
							customStyle="margin-left: 4rpx;"></u-icon>
					</view>
				</view>
			</view>
		</u-sticky>


		<!-- 向导列表 -->
		<view class="guide-list-container">
			<view v-for="(guide,index) in guideList" :key="index" class="guide-card">
				<image class="guide-avatar" :src="guide.avatar" mode="aspectFill"></image>
				<view class="guide-info">
					<view class="info-header">
						<view class="name-line">
							<text class="name">{{ guide.name }}</text>
							<view class="gender-age" :class="guide.gender">
								<u-icon :name="guide.gender === 'female' ? 'woman' : 'man'"
									:color="guide.gender === 'female' ? '#F07AB3' : '#39B1FB'" size="14"></u-icon>
								<text>{{ guide.age }}</text>
							</view>
						</view>
						<view v-if="guide.isOnline" class="online-status">
							<view class="dot"></view>
							<text>在线</text>
						</view>
					</view>

					<view class="info-row stats-row">
						<view class="stat-tag"><u-icon name="/static/index/featured/icon_rz.png" size="20"></u-icon>
							入驻平台{{ guide.tenure }}</view>
						<view class="stat-tag"><u-icon name="/static/index/featured/icon_cjxd.png" size="20"></u-icon>
							{{ guide.level }}
						</view>
					</view>

					<view class="info-row rating-row">
						<u-rate :value="guide.rating" gutter="0" readonly size="20" activeColor="#ffaa00"></u-rate>
						<text class="rating-score">{{ guide.rating.toFixed(1) }}</text>
						<text class="order-count">接单{{ guide.orders }}+次</text>
					</view>

					<view class="info-row tags-row">
						<view class="info-tag">{{ guide.zodiac }}</view>
						<view class="info-tag" v-for="hobby in guide.hobbies" :key="hobby">{{ hobby }}</view>
					</view>

					<view class="info-bio">
						{{ guide.bio }}
					</view>
				</view>
			</view>
		</view>

		<!-- 筛选弹窗 -->
		<u-popup :show="showFilterPopup" mode="top" @close="showFilterPopup = false" :safeAreaInsetTop="true">
			<view class="filter-popup">
				<view class="filter-section">
					<text class="filter-title">导游性别</text>
					<u-radio-group v-model="filters.gender" placement="row">
						<u-radio label="不限" name="all"></u-radio>
						<u-radio label="男" name="male"></u-radio>
						<u-radio label="女" name="female"></u-radio>
					</u-radio-group>
				</view>
				<view class="filter-section">
					<text class="filter-title">导游等级</text>
					<u-checkbox-group v-model="filters.levels" placement="row">
						<u-checkbox label="初级向导" name="初级向导"></u-checkbox>
						<u-checkbox label="中级向导" name="中级向导"></u-checkbox>
						<u-checkbox label="资深向导" name="资深向导"></u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="filter-buttons">
					<u-button shape="circle" text="重置" @click="resetFilters"></u-button>
					<u-button shape="circle" text="确定" color="#ffc640" customStyle="margin-left: 20rpx;"
						@click="applyFilters"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList: [{
						image: '/static/index/featured/bdxd_banner.png'
					},
					{
						image: '/static/index/featured/bdxd_banner.png'
					},
				],
				tabList: [{
					name: '推荐'
				}, {
					name: '关注'
				}],
				currentTab: 0,
				// 模拟的向导数据
				recommendedGuides: [],
				followedGuides: [],
				showFilterPopup: false,
				filters: {
					gender: 'all',
					levels: [],
				},
			};
		},
		computed: {
			guideList() {
				// 根据当前Tab返回不同的数据列表
				return this.currentTab === 0 ? this.recommendedGuides : this.followedGuides;
			}
		},
		onLoad() {
			this.fetchMockData();
		},
		methods: {
			// 模拟从接口获取数据
			fetchMockData() {
				this.recommendedGuides = [{
						id: 1,
						name: 'EDDIE • 小迪',
						gender: 'female',
						age: 28,
						isOnline: true,
						avatar: '/static/index/featured/tx1.png',
						tenure: '2年',
						level: '初级向导',
						rating: 5.0,
						orders: 20,
						zodiac: '摩羯座',
						hobbies: ['游泳', '健身', '徒步'],
						bio: '和我一起探索景点和美食, 绝不辜负...'
					},
					{
						id: 2,
						name: 'V十三EE',
						gender: 'female',
						age: 25,
						isOnline: false,
						avatar: '/static/index/featured/tx2.png',
						tenure: '3年',
						level: '中级向导',
						rating: 5.0,
						orders: 90,
						zodiac: '水瓶座',
						hobbies: ['森林', '大海', '绘画'],
						bio: '活力向导, 热爱这座城市, 分享所有...'
					},
					{
						id: 3,
						name: '旅行记录者',
						gender: 'male',
						age: 35,
						isOnline: true,
						avatar: '/static/index/featured/tx3.png',
						tenure: '5年',
						level: '资深向导',
						rating: 4.0,
						orders: 650,
						zodiac: '白羊座',
						hobbies: ['爬山', '骑行'],
						bio: '资深定制师, 为你解锁深度体验与小...'
					},
					{
						id: 4,
						name: 'EDDIE • 小迪',
						gender: 'female',
						age: 28,
						isOnline: true,
						avatar: '/static/index/featured/tx1.png',
						tenure: '2年',
						level: '初级向导',
						rating: 5.0,
						orders: 20,
						zodiac: '摩羯座',
						hobbies: ['游泳', '健身', '徒步'],
						bio: '和我一起探索景点和美食, 绝不辜负...'
					},
					{
						id: 5,
						name: 'V十三EE',
						gender: 'female',
						age: 25,
						isOnline: false,
						avatar: '/static/index/featured/tx2.png',
						tenure: '3年',
						level: '中级向导',
						rating: 5.0,
						orders: 90,
						zodiac: '水瓶座',
						hobbies: ['森林', '大海', '绘画'],
						bio: '活力向导, 热爱这座城市, 分享所有...'
					},
					{
						id: 6,
						name: '旅行记录者',
						gender: 'male',
						age: 35,
						isOnline: true,
						avatar: '/static/index/featured/tx3.png',
						tenure: '5年',
						level: '资深向导',
						rating: 4.0,
						orders: 650,
						zodiac: '白羊座',
						hobbies: ['爬山', '骑行'],
						bio: '资深定制师, 为你解锁深度体验与小...'
					},
					{
						id: 1,
						name: 'EDDIE • 小迪',
						gender: 'female',
						age: 28,
						isOnline: true,
						avatar: '/static/index/featured/tx1.png',
						tenure: '2年',
						level: '初级向导',
						rating: 5.0,
						orders: 20,
						zodiac: '摩羯座',
						hobbies: ['游泳', '健身', '徒步'],
						bio: '和我一起探索景点和美食, 绝不辜负...'
					},
					{
						id: 2,
						name: 'V十三EE',
						gender: 'female',
						age: 25,
						isOnline: false,
						avatar: '/static/index/featured/tx2.png',
						tenure: '3年',
						level: '中级向导',
						rating: 5.0,
						orders: 90,
						zodiac: '水瓶座',
						hobbies: ['森林', '大海', '绘画'],
						bio: '活力向导, 热爱这座城市, 分享所有...'
					},
					{
						id: 3,
						name: '旅行记录者',
						gender: 'male',
						age: 35,
						isOnline: true,
						avatar: '/static/index/featured/tx3.png',
						tenure: '5年',
						level: '资深向导',
						rating: 4.0,
						orders: 650,
						zodiac: '白羊座',
						hobbies: ['爬山', '骑行'],
						bio: '资深定制师, 为你解锁深度体验与小...'
					}
				];
				this.followedGuides = [{
					id: 3,
					name: '旅行记录者',
					gender: 'male',
					age: 35,
					isOnline: true,
					avatar: '/static/index/featured/tx3.png',
					tenure: '5年',
					level: '资深向导',
					rating: 4.0,
					orders: 650,
					zodiac: '白羊座',
					hobbies: ['爬山', '骑行'],
					bio: '资深定制师, 为你解锁深度体验与小...'
				}];
			},
			handleTabChange(index) {
				this.currentTab = index;
				// 实际项目中，这里会触发接口请求
			},
			navigateToCitySelect() {
				uni.navigateTo({
					url: '/pages_sub/common/city/city-select'
				});
			},
			resetFilters() {
				this.filters = {
					gender: 'all',
					levels: []
				};
			},
			applyFilters() {
				this.showFilterPopup = false;
				// 实际项目中，这里会带着筛选条件请求接口
				uni.showToast({
					title: '筛选功能待实现',
					icon: 'none'
				});
			},
			goBack() {
				uni.navigateBack();
			},
		}
	};
</script>

<style lang="scss" scoped>
	.local-guide-page {
		background-color: #FCFFFF;
		min-height: 100vh;
	}

	.header-section {
		position: relative;
		width: 100%;
		height: 370rpx;
		background: linear-gradient(to bottom, rgba(222, 255, 130, 1), rgba(251, 255, 255, 1));

		.goBack {
			width: 100%;
			height: 40rpx;
			position: absolute;
			top: 80rpx;
			left: 30rpx;
			z-index: 100;
		}


		.LocalWizardLogo {
			position: absolute;
			top: 90rpx;
			left: 150rpx;
			z-index: 100;

			image {
				width: 514rpx;
				height: 160rpx;
			}
		}

		.LocalWizardText {
			position: absolute;
			top: 110rpx;
			left: -18rpx;
			z-index: 100;

			image {
				width: 226rpx;
				height: 230rpx;
			}
		}

		.header-content {
			position: relative;
			z-index: 2;
			padding: 20rpx 30rpx 0;
			padding-top: var(--status-bar-height);

			.top-bar {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.page-title {
					font-size: 44rpx;
					font-weight: bold;
					color: #000;
				}

				.how-to-link {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #333;
					// background-color: rgba(255, 255, 255, 0.7);
					padding: 8rpx 16rpx;
					border-radius: 20rpx;

					text {
						margin-left: 8rpx;
					}
				}
			}

			.page-subtitle {
				font-size: 32rpx;
				font-weight: bold;
				color: #000;
				margin-top: 8rpx;
				display: block;
			}

			.search-bar {
				display: flex;
				align-items: center;
				background-color: #fff;
				border-radius: 40rpx;
				padding: 4rpx 4rpx 4rpx 16rpx;
				margin: 240rpx 80rpx 0 80rpx;

				/* #ifdef APP */
				margin: 160rpx 60rpx 0 60rpx;
				/* #endif */
				border: 1rpx solid #464646;

				.search-placeholder {
					flex: 1;
					margin-left: 4rpx;
					color: #666;
					font-size: 28rpx;
				}

				.search-button {
					display: flex;
					align-items: center;
					background-color: #FEAB0F;
					padding: 10rpx 24rpx;
					border-radius: 30rpx;
					color: #fff;
					font-weight: bold;
					box-shadow: 0 4rpx 12rpx rgba(255, 198, 64, 0.4);

					text {
						margin-right: 4rpx;
					}
				}
			}
		}
	}

	.swiper-container {
		// margin-top: 70rpx;
		padding: 20rpx 30rpx;
		position: relative;
		z-index: 2;
	}

	.filter-bar {
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		position: relative;
		z-index: 2;

		.tabs {
			display: flex;
			align-items: center;

			.tab-item {
				font-size: 30rpx;
				color: #666;
				margin-right: 40rpx;
				padding-bottom: 10rpx;
				border-bottom: 4rpx solid transparent;
				transition: all 0.3s;

				&.active {
					font-size: 34rpx;
					font-weight: bold;
					color: #000;
					// border-bottom-color: #FFC640;
				}
			}
		}

		.actions {
			display: flex;
			align-items: center;

			.action-item {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				color: #333;
				margin-left: 30rpx;

				text {
					margin-left: 4rpx;
				}
			}
		}
	}

	.guide-list-container {
		padding: 0 30rpx;
		padding-bottom: 40rpx;
		margin-top: 50rpx;
		position: relative;
		z-index: 2;
	}

	.guide-card {
		position: relative;
		display: flex;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx 20rpx 0 20rpx;
		padding-left: 240rpx;
		margin-bottom: 60rpx;
		min-height: 230rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.06);

		.guide-avatar {
			position: absolute;
			top: -35rpx;
			left: 20rpx;
			width: 200rpx;
			height: 255rpx;
			background-color: #000;
			border-radius: 20rpx;
		}

		.guide-info {
			width: 100%;
			display: flex;
			flex-direction: column;

			.info-header {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;

				.name-line {
					display: flex;
					align-items: center;

					.name {
						font-size: 34rpx;
						font-weight: bold;
						color: #000;
					}

					.gender-age {
						display: flex;
						align-items: center;
						font-size: 22rpx;
						padding: 4rpx 10rpx;
						border-radius: 20rpx;
						margin-left: 16rpx;
						font-weight: 700;

						&.female {
							background-color: #FBF0F4;
							color: #F07AB3;
						}

						&.male {
							background-color: #D2EBFA;
							color: #39B1FB;
						}

						text {
							margin-left: 4rpx;
						}
					}
				}

				.online-status {
					display: flex;
					align-items: center;
					font-size: 22rpx;
					color: #000;

					.dot {
						width: 18rpx;
						height: 18rpx;
						background-color: #74CD26;
						border-radius: 50%;
						margin-right: 8rpx;
					}
				}
			}

			.info-row {
				display: flex;
				align-items: center;
				margin-top: 6rpx;
			}

			.stats-row {
				.stat-tag {
					display: flex;
					align-items: center;
					font-size: 22rpx;
					background-color: #f5f5f5;
					color: #000;
					padding: 4rpx 8rpx;
					border-radius: 8rpx;
					margin-right: 12rpx;

					.u-icon {
						margin-right: 6rpx;
					}
				}
			}

			.rating-row {
				font-size: 24rpx;

				.rating-score {
					// font-weight: bold;
					color: #000;
					margin: 0 12rpx;
				}

				.order-count {
					color: #000;
				}
			}

			.tags-row {
				flex-wrap: wrap;
				gap: 12rpx;

				.info-tag {
					font-size: 22rpx;
					color: #999;
					// border: 1rpx solid #e0e0e0;
					// padding: 4rpx 12rpx;
					border-radius: 20rpx;
				}
			}

			.info-bio {
				font-size: 26rpx;
				color: #333;
				margin-top: 8rpx;
				// 多行文本溢出省略
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		}
	}

	.filter-popup {
		padding: 30rpx;
		padding-top: calc(var(--status-bar-height) + 30rpx);

		.filter-section {
			margin-bottom: 40rpx;

			.filter-title {
				font-size: 30rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
				display: block;
			}

			::v-deep .u-radio-group,
			::v-deep .u-checkbox-group {
				gap: 40rpx;
			}
		}

		.filter-buttons {
			display: flex;
		}
	}
</style>